<!--表单提交结果页-->
<script setup>
import { useRoute } from 'vue-router/composables'
import { useOrderFromStore } from '@/stores/orderFrom.js'
import MButton from '@/components/MButton.vue'
const route = useRoute()
const { resetState } = useOrderFromStore()
const { title } = defineProps({
  title: {
    type: String,
    default: '提交成功'
  }
})
const orderNo = ref(route.query.orderNo)
resetState()
</script>
<template>
  <div class="msg-box w-80%">
    <img src="@/assets/img/icon_successful.svg" class="w-80px h-80px" alt="" />
    <div class="text-center text-diy fs-28 fw-bold h-50px">{{ title }}</div>
    <div class="box-btn">
      <MButton
        class="w-full h-40px"
        @click="$router.replace(`/workOrder/detail?orderNo=${orderNo}`)"
      >
        查看工单详情
      </MButton>
      <MButton class="w-full h-40px" @click="$router.replace(`/home`)" plain>
        返回首页
      </MButton>
    </div>
  </div>
</template>

<style scoped lang="less">
.msg-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding-top: 110px;
  div {
    width: 80%;
    margin: 0 auto;
  }
  .box-btn {
    height: 128px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
  }
  .text-diy {
    margin: 8px 0 20px 0;
    font-weight: 600;
    font-size: 20px;
    color: #1e2226;
    letter-spacing: 0;
  }
}
</style>
